<%@ page import="com.blog.pojo.Articles" %><%--
  Created by IntelliJ IDEA.
  User: honor
  Date: 2025/8/1
  Time: 10:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>${article.title}</title>
    <link rel="icon" href="./favicon/favicon.ico" type="image/x-icon">
    <script src="js/jquery-2.0.2.min.js"></script>
    <link href="css/articale.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css">
    <script src="js/bootstrap.bundle.min.js"></script>

</head>
<body>
<%
    Articles article = (Articles) request.getAttribute("article");
%>
<!-- 文章信息 -->
<h1>${article.title}</h1>
<p><strong>作者：</strong>${article.userName}</p>
<div>${article.content}</div>
<!-- 评论区域 -->
<div class="header mt-5">
    <div class="header mt-5 d-flex justify-content-between align-items-center">
        <h4 class="mb-0">评论区</h4>
        <button class="btn btn-success btn-sm" onclick="openAddCommentModal()">
            <i class="bi bi-plus-circle"></i> 发表评论
        </button>


    </div>
    <c:if test="${empty commentList}">
        <p>暂无评论</p>
    </c:if>
    <c:forEach items="${commentList}" var="comment">
        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>${comment.userName}</strong>
                <small class="text-muted">${comment.createdAt}</small>
            </div>
            <div class="card-body">
                <p class="card-text">${comment.content}</p>

                <!-- 只有能删/改的人才看得到按钮 -->
                <div class="mt-1 d-flex gap-2 justify-content-end">
                    <c:if test="${comment.canDelete}">
                        <button class="btn btn-sm btn-outline-danger"
                                onclick="deleteComment(${comment.id})">删除</button>
                    </c:if>
                </div>
            </div>
        </div>
    </c:forEach>
</div>


<span>

    <!-- 点赞 -->
                <button class="btn btn-sm btn-outline-primary like-btn ${article.userLiked ? 'btn-active' : ''}" onclick="start(${article.id})"
                        data-id="${article.id}">
                <i class="bi bi-hand-thumbs-up"></i>
             <span class="like-count" id="startCount${article.id}">${article.startCount}</span>
            </button>


    <!-- 收藏 -->
                <button class="btn btn-sm btn-outline-warning favorite-btn ms-2 ${article.userFavorited ? 'btn-favorite-active' : ''}" onclick="favorite(${article.id})"
                        data-id="${article.id}">
            <i class="bi bi-star"></i>
             <span class="favorite-count" id="favoriteCount${article.id}">${article.favoriteCount}</span>
            </button>
    </span>

<script>

    function toggleAction(id, type) {
        $.post(`article/${type}/${id}`)
            .done(function (data) {
                // data: {"count":12,"active":true}
                const btn = $(`.${type}-btn[data-id=${id}]`);
                btn.find('span').text(data.count);
                btn.toggleClass('btn-outline-primary active', type === 'like');
                btn.toggleClass('btn-outline-warning active', type === 'favorite');
            });
    }
    function start(id) {
        $.post('articleServlet?method=start&id=' + id)
            .done(function (data) {
                let obj = JSON.parse(data);
                if (obj.error) {
                    alert(obj.error);
                    return;
                }

                // 更新点赞数
                $('#startCount' + id).text(obj.count);

                // 更新按钮样式
                let btn = $('.like-btn[data-id="' + id + '"]');
                if (obj.liked) {
                    btn.addClass('btn-active');
                } else {
                    btn.removeClass('btn-active');
                }
                btn.find('i').toggleClass('bi-hand-thumbs-up-fill', obj.liked);

            })
            .fail(function () {
                alert("请求失败");
            });
    }




    function favorite(id) {
        $.post('articleServlet?method=favorite&id=' + id)
            .done(function (data) {
                let obj = JSON.parse(data);
                if (obj.error) {
                    alert(obj.error);
                    return;
                }

                // 更新收藏数
                $('#favoriteCount' + id).text(obj.count);

                // 更新按钮样式
                let btn = $('.favorite-btn[data-id="' + id + '"]');
                if (obj.liked) {
                    btn.addClass('btn-favorite-active');
                    btn.removeClass('btn-outline-primary');
                } else {
                    btn.removeClass('btn-favorite-active');
                    btn.addClass('btn-outline-primary');
                }
                btn.find('i').toggleClass('bi-star-fill', obj.liked);

            })
            .fail(function () {
                alert("请求失败");
            });
    }



    function deleteComment(id) {
        if (confirm("确定删除这条评论？")) {
            $.post('commentServlet?method=deleteComment&id=' + id)
                .done(function (data) {
                    if (data.success) {
                        location.reload();   // 删除成功后刷新页面
                    } else {
                        alert(data.error || "删除失败");
                    }
                });
        }
    }



    function submitComment() {
        const content = document.getElementById('commentContent').value.trim();
        if (!content) {
            alert('请输入评论内容');
            return;
        }

        $.post('${pageContext.request.contextPath}/commentServlet', {
            method: 'addComment',
            articleId: ${article.id},
            content: content
        }).done(function (data) {
            if (data.success) {
                alert('评论发表成功');
                location.href = '${pageContext.request.contextPath}/articleServlet?method=findById&id=${article.id}';
            } else {
                alert(data.error || '评论失败');
            }
        }).fail(function () {
            alert('请求失败');
        });
    }
    function openAddCommentModal() {
        <c:choose>
        <c:when test="${empty sessionScope.user}">
        alert('请先登录后再发表评论！');
        </c:when>
        <c:otherwise>
        new bootstrap.Modal(document.getElementById('addCommentModal')).show();
        </c:otherwise>
        </c:choose>
    }
</script>

<div class="modal fade" id="addCommentModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="${pageContext.request.contextPath}/commentServlet" method="post">
                <div class="modal-header">
                    <h5 class="modal-title">发表评论</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="method" value="addComment">
                    <input type="hidden" name="articleId" value="${article.id}">
                    <div class="mb-3">
                        <label class="form-label">评论内容</label>
                        <textarea class="form-control" name="content" rows="3" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">发表</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>